<template>
  <div>
    <a-image-preview-group>
      <div class="big-box">
        <div class="img-time-box">
          <a-image :width="300" src="https://aliyuncdn.antdv.com/vue.png"
            >123</a-image
          >
          <div class="time-box">时间</div>
        </div>
        <div class="img-time-box">
          <a-image :width="300" src="https://aliyuncdn.antdv.com/vue.png"
            >123</a-image
          >
          <div class="time-box">时间</div>
        </div>
        <div class="img-time-box">
          <a-image :width="300" src="https://aliyuncdn.antdv.com/vue.png"
            >123</a-image
          >
          <div class="time-box">时间</div>
        </div>
        <div class="img-time-box">
          <a-image :width="300" src="https://aliyuncdn.antdv.com/vue.png"
            >123</a-image
          >
          <div class="time-box">时间</div>
        </div>
      </div>
    </a-image-preview-group>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.big-box {
  display: flex;
  .img-time-box {
    flex: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .time-box {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(228, 235, 245, 1);
      bottom: 0;
      width: 80%;
    }
  }
}
</style>
